<script src="${colorAdmin}/assets/js/jquery-3.6.0.min.js"></script>
<script>
    function openMenu(pid,cid,url){
        $('.active').removeClass('active');
        $('#menu_'+pid).addClass('active');
        $('#child_'+cid).addClass('active');

        $('#workspace').attr('src',url);

    }
</script>

<!-- begin #sidebar -->
<div id="sidebar" class="sidebar">
    <!-- begin sidebar scrollbar -->
    <div data-scrollbar="true" data-height="100%">
        <!-- begin sidebar user -->
        <ul class="nav">
            <li class="nav-profile">
                <a href="javascript:;" data-toggle="nav-profile">
                    <div class="cover with-shadow"></div>
                    <div class="image">
                        <img src="${colorAdmin}/assets/img/user/user-13.jpg" alt="" />
                    </div>
                    <div class="info">
                        <b class="caret pull-right"></b>Sean Ngu
                        <small>Front end developer</small>
                    </div>
                </a>
            </li>
            <li>
                <ul class="nav nav-profile">
                    <li><a href="javascript:;"><i class="fa fa-cog"></i> Settings</a></li>
                    <li><a href="javascript:;"><i class="fa fa-pencil-alt"></i> Send Feedback</a></li>
                    <li><a href="javascript:;"><i class="fa fa-question-circle"></i> Helps</a></li>
                </ul>
            </li>
        </ul>
        <!-- end sidebar user -->
        <!-- begin sidebar nav -->
        <ul class="nav"><li class="nav-header">Navigation</li>
            <c:forEach items="${menus}" var="menu" varStatus="menuStatus">
                    <li class="has-sub " id="menu_${menu.id}">

                    <a href="javascript:;">
                        <b class="caret"></b>
                        <i class="fa fa-${menu.icon}"></i>
                        <span>${menu.name}</span>
                    </a>
                    <ul class="sub-menu">
                        <c:forEach items="${menu.childs}" var="child" varStatus="childStatus">
                            <li id="child_${child.id}" ><a href="javascript:void(0);" onclick="openMenu('${menu.id}','${child.id}','${child.url}')">${child.name}</a></li>
                            <c:if test="${childStatus.count == 1 and menuStatus.count == 1}">
                                <script>
                                    $(function(){
                                        openMenu('${menu.id}','${child.id}','${child.url}');
                                    });
                                </script>
                            </c:if>
                        </c:forEach>
                    </ul>

                </li>
            </c:forEach>

            <!-- begin sidebar minify button -->
            <li><a href="javascript:;" class="sidebar-minify-btn" data-click="sidebar-minify"><i class="fa fa-angle-double-left"></i></a></li>
            <!-- end sidebar minify button -->
        </ul>
        <!-- end sidebar nav -->
    </div>
    <!-- end sidebar scrollbar -->
</div>
<div class="sidebar-bg"></div>
<!-- end #sidebar -->

